<template>
  <div v-drag class="add-info">
    <el-card style="max-width: 400px; max-height: 500px" shadow="hover">
      <template #header>
        <p>事件详细信息 <span @mousedown.stop @click="close">x</span></p>
      </template>
      <table border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td>事件编号</td>
          <td>
            <el-input @mousedown.stop v-model="eventNumber" placeholder="请输入事件编号" />
          </td>
        </tr>
        <tr>
          <td>事件类型</td>
          <td>
            <el-select @mousedown.stop v-model="eventType" placeholder="请选择事件类型">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>事件等级</td>
          <td>
            <el-select @mousedown.stop v-model="eventLevel" placeholder="请选择事件类型">
              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>发生时间</td>
          <td>
            <el-date-picker @mousedown.stop v-model="eventTime" type="datetime" placeholder="请输入事件发生时间" />
          </td>
        </tr>
        <tr>
          <td>发生地点</td>
          <td>
            <el-input @mousedown.stop v-model="eventAddress" placeholder="请输入事件发生地点" />
          </td>
        </tr>
        <tr>
          <td>车牌号</td>
          <td>
            <el-input @mousedown.stop v-model="carNumber" placeholder="请输入车牌号" />
          </td>
        </tr>
        <tr>
          <td>驾驶员</td>
          <td>
            <el-input @mousedown.stop v-model="driverName" placeholder="请输入驾驶员姓名" />
          </td>
        </tr>
        <tr>
          <td>处理状态</td>
          <td>
            <el-select @mousedown.stop v-model="eventState" placeholder="请选择处理状态">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </td>
        </tr>
      </table>
      <div class="btns">
        <button @mousedown.stop @click="submit">提交</button>
        <button @mousedown.stop @click="close">取消</button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { defineEmits, ref } from 'vue';
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
const { addevent } = storeToRefs(useUserStore());
const eventNumber = ref('');
const eventTime = ref('');
const eventType = ref('');
const eventLevel = ref('');
const eventAddress = ref('');
const carNumber = ref('');
const driverName = ref('');
const eventState = ref('');
const isSubmit = ref(false);
const divTop = ref(0);
const divLeft = ref(0);
const emit = defineEmits(['add-event']);
const options = [
  { value: '碰撞', label: '碰撞' },
  { value: '刮擦', label: '刮擦' },
  { value: '翻车', label: '翻车' },
  { value: '碾压', label: '碾压' },
  { value: '失火', label: '失火' },
  { value: '其他', label: '其他' },
];
const options1 = [
  { value: '1', label: '轻微事故' },
  { value: '2', label: '中度事故' },
  { value: '3', label: '重大事故' },
  { value: '4', label: '特大事故' },
];
const options2 = [
  { value: '0', label: '待处理' },
  { value: '1', label: '处理中' },
  { value: '2', label: '已处理' },
];
const close = () => {
  addevent.value = false;
};
const submit = () => {
  addevent.value = false;
  isSubmit.value = true;
  emit('add-event', {
    eventNumber,
    eventTime,
    eventType,
    eventLevel,
    eventAddress,
    carNumber,
    driverName,
    eventState,
    isSubmit,
  });
};
const onMouseDown = e => {
  const { clientX, clientY } = e;
  top = e.target.offsetTop;
  left = e.target.offsetLeft;
  divTop = clientY - top;
  divLeft = clientX - left;
};
</script>

<style lang="scss" scoped>
.add-info {
  position: absolute;
  width: 400px;
  z-index: 99;
  top: 15%;
  left: 36%;
  table {
    border: 1px solid #eee;
    td {
      width: 180px;
      height: 30px;
      font-weight: 600;
      font-size: 14px;
      text-align: center;
    }
  }
  .btns {
    width: 200px;
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-left: 130px;
    button {
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    button:first-child {
      background-color: #0f61a1;
      color: white;
    }
  }
}
:deep(.el-card__header) {
  padding: 5px;
  p {
    background: skyblue;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: 400;
    color: white;
  }
  span {
    margin-left: 250px;
    color: black;
    cursor: pointer;
  }
}
</style>
